<template>
  <div class="growth_list" v-loading='loadingPage'>
    <!-- 岗位成长计划<el-button @click="goToDetail">按钮</el-button> -->
    <div class="seach_top search-form">
      <el-form :model="searchForm" size="mini" label-position="right" class="demo-form-inline" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="部门:">
              <el-select v-model="searchForm.deptId" placeholder="请选择部门" filterable clearable
              >
                <el-option
                  v-for="item  in  deptIds"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.userName" clearable placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="searchForm.startDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change='compareTime'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="searchForm.endDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change='compareTime'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="searchBtn">查询</el-button>
            <!--							<el-button size="mini" @click="exportForm">导出</el-button>-->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="list_growth">


<!--      <div>-->
<!--        <el-col :span="8" style="text-align:left;margin-bottom: 10px;">-->
<!--          <el-button size="mini" type="primary" @click="goSaveToDetail()"-->
<!--          >新增-->
<!--          </el-button>-->
<!--        </el-col>-->
<!--      </div>-->
      <el-table
        v-loading='loading'
        ref="table"
        border
        fit
        style="width: 100%"
        :data="tableData"
        size="small"
        :row-key="bindRowKeys"
      >
        <el-table-column type="selection" align="center" width="50" :reserve-selection="true"></el-table-column>
        <el-table-column
          v-for="column in columns"
          :key="column.name"
          :prop="column.prop"
          :label="column.label"
          :align="column.align"
          :width="column.width"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="goToDetail(scope.row)">查看</el-button>
<!--            <el-button type="text" size="mini" @click="goToEditDetail(scope.row)">编辑</el-button>-->
          </template>
        </el-table-column>

      </el-table>
      <div class="paging_bottom">
        <page
          :hidden="tableData && tableData.length === 0"
          :total="total"
          :page.sync="pageNo"
          :limit.sync="pageSize"
          @pagination="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { columns } from './table'
  import axios from 'axios'
  export default {
    name: 'jobGrowthPlan',
    data() {
      return {
        loadingPage: false,
        columns,
        loading: false,
        tableData: [],
        deptIds: [],
        searchForm: {
          deptId: '',
          userName: '',
          startDate: '',
          endDate: ''
        },
        currentPage: 0,
        pageNo: 1,
        pageSize: 10,
        total: 0,
        checkedArr: []
      }
    },
    computed: {
      ...mapGetters (['keepAliveMenu'])
    },
    created() {
      // this.getDeptsByOrgId()
      this.getPageGrowthPlan ()
    },
    mounted() {
      let self = this
      document.onkeydown = function(e) {
        let ev = document.all ? window.event : e
        if (ev.keyCode === 13) {
          self.searchBtn ()
        }
      }
    },
    methods: {
      // 获取部门
      //   getDeptsByOrgId () {
      //     axios ({
      //       method: 'post',
      //       url: '/hr-xc-human-resources-perform-manage/userinfo/findep',
      //     }).then (({ data }) => {
      //       console.log(data)
      //       if (data && data.code === '00000') {
      //         this.deptIds = data.result
      //       }
      //     }).catch (error => {
      //       this.$message.error ('.')
      //     })
      //  },

      compareTime() {

        if (this.searchForm.startDate && this.searchForm.endDate) {
          if (new Date (this.searchForm.startDate) >= new Date (this.searchForm.endDate)) {
            this.$my_message.warning ('开始时间不能小于等于结束时间')
            this.searchForm.startDate = ''
            this.searchForm.endDate = ''
            return
          }
        }
      },
      async getPageGrowthPlan() {
        this.loading = true
        // try{
        //   trimSpace(this.searchForm)
        //   const { data } = await jobGrowthPlanApi.getPageGrowthPlan({...this.searchForm},{pageNo:this.pageNo,pageSize:this.pageSize})
        //   alert(data.result);
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/userinfo/getPageGrowthPlan',
          data: {
            pageNo: this.pageNo, pageSize: this.pageSize
          }
        }).then (({ data }) => {
          if (data) {
            this.tableData = data.list
            this.total = data.total
          }
        })
        this.loading = false
        // data.result.forEach(item => {
        //   if(item.otherCase){
        //     item.futurePost = item.futurePost + ":" + item.otherCase
        //   }
        // });
        // this.tableData = data.result
        // this.total = data.totalCount
        // }catch(err){
        //   console.log(err)
        // }
      },
      // 新增 / 修改

      searchBtn() {
        this.getPageGrowthPlan ()
      },
      bindRowKeys(row) {
        return row.id
      },
      // handleSelectionChange(value){
      // 	this.checkedArr = value
      // 	// element表格多选第一页选中往后翻一页全选，再回到第一页会再次选中第一页的数据，所以需要手动去重
      // 	let hash = {};
      // 	this.checkedArr = this.checkedArr.reduce((preVal, curVal) => {
      // 		hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal);
      // 		return preVal
      // 	}, [])
      // 	console.log(this.checkedArr,'this.checkedArr')
      // },
      // async exportForm(){
      //   console.log('导出')
      //   this.loadingPage = true
      //   this.searchForm.ids = ''
      // 	if(this.checkedArr.length > 0){
      // 		this.searchForm.ids = this.checkedArr.map((item,index) => {
      //         return item.id
      //     }).join(',')
      // 	}else{
      // 		this.searchForm.ids = ''
      // 	}
      //   try{
      //     const res = await jobGrowthPlanApi.exportGrowthPlan({
      //       ...this.searchForm
      //     })
      //     const headerArr = res.headers['content-disposition'].split(';')
      // 		const fileName = decodeURI(headerArr[1].split('=')[1])
      // 		const blob = new Blob([res.data], { type: res.data.type })
      // 		if ('download' in document.createElement('a')) {
      // 			// 非IE下载
      // 			const elink = document.createElement('a')
      // 			elink.download = fileName
      // 			elink.style.display = 'none'
      // 			elink.href = URL.createObjectURL(blob)
      // 			document.body.appendChild(elink)
      // 			elink.click()
      // 			URL.revokeObjectURL(elink.href) // 释放URL 对象
      // 			document.body.removeChild(elink)
      // 		} else {
      // 			// IE10+下载
      // 			navigator.msSaveBlob(blob, fileName)
      // 		}
      //     this.$my_message.success("导出成功")
      //   }catch(err){
      //     // this.$my_message.warning(err)
      //   }
      //   this.loadingPage = false
      // },
      goToDetail(val) {
        this.$router.push ({
          path: '/relatedSupport/jobGrowthPlan/growthDetails', query: {
            fromPath: this.$route.fullPath,
            row: val,
            optType: 'draftDetail',
            id: val.id
          }
        })
      },
      // goToEditDetail(val) {
      //   alert ('val' + val)
      //
      // },
      goSaveToDetail(){
        this.$router.push ({
          path: '/relatedSupport/jobGrowthPlan/growthDetails', query: {
            fromPath: this.$route.fullPath,
            row: null,
            optType: 'draftDetail',
            id: null
          }
        })
      },

      /** 点击分页触发的事件 */
      handlePageChange(pageInfo) {
        console.log (pageInfo)
        this.pageNo = pageInfo.page
        this.pageSize = pageInfo.limit
        this.getPageGrowthPlan ()
      }
    }
    // beforeRouteLeave(to, from, next) {
    //   if (to.name !== 'relatedSupport.jobGrowthPlan.growthDetails') {
    //     this.$store.commit('app/SET_KEEP_ALIVE', [])
    //   }
    //   next()
    // },
    // beforeRouteEnter(to, from, next) {
    //   next(vm => {
    //     vm.$store.commit('app/SET_KEEP_ALIVE', ['jobGrowthPlan'])
    //   })
    // }
  }
</script>

<style scoped lang="scss">
  .growth_list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .list_growth {
      flex: 1;
      background-color: #fff;
      padding: 15px 10px;
      border-radius: 6px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    }
  }
</style>
